<template>
  <div class="searchContainer">
    <div class="searchHeader">
      <!-- 搜索静态搭建 -->
      <div class="searchHeaderNav">
        <form action="/">
          <van-search
            v-model="value"
            :show-action="showAction"
            :placeholder="`${defaultKeyword.keyword}`"
            @update:model-value="onSearch"
            @cancel="onCancel"
            @search="onshow"
            @focus="showCancel"
          />
        </form>
      </div>
      <div class="qwe"></div>
      <div class="searchHot" v-if="history.length" v-show="isShow && showGoods">
        <div class="searchHis">
          <h3 class="searchHotText">历史记录</h3>
          <van-icon @click="removeHistory" name="delete-o" size="0.5rem" />
        </div>
        <div class="searchHotTag">
          <span class="searchHotTagItem" v-for="(historyItem, index) in history" :key="index">
            <van-tag
              @click="toSearchInfo(historyItem)"
              plain
              type="primary"
              color="#999"
              text-color="#333333"
              size="medium"
              >{{ historyItem }}</van-tag
            >
          </span>
        </div>
      </div>
      <div class="searchHot" v-show="isShow && showGoods">
        <h3 class="searchHotText">热门搜索</h3>
        <div class="searchHotTag">
          <span class="searchHotTagItem" v-for="(searchItem, index) in hotKeywordList" :key="index">
            <van-tag
              plain
              @click="toSearchInfo(searchItem.keyword)"
              type="primary"
              :color="searchItem.highlight === 1 ? '#dd1a21' : '#aaa'"
              :text-color="searchItem.highlight === 1 ? '#dd1a21' : '#000'"
              size="medium"
              >{{ searchItem.keyword }}</van-tag
            >
          </span>
        </div>
      </div>

      <!-- 点击搜索弹出的界面 -->
      <div class="searchTwo" v-show="!isShow">
        <div
          class="searchTwoItem"
          @click="toSeaarchGoodslist(timeItem)"
          v-for="(timeItem, index) in hotTimeData"
          :key="index"
        >
          <h3 class="searchTwoItemText">{{ timeItem }}</h3>
          <van-icon name="arrow" size="0.5rem" />
        </div>
      </div>

      <van-back-top right="15vw" bottom="10vh" />
      <!-- 搜索商品或者点击商品后出现的商品界面 -->
      <searchGoods v-show="!showGoods"></searchGoods>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Search'
})
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { searchStore } from '@/stores/search'
import { storeToRefs } from 'pinia'
import { debounce } from 'lodash'
import searchGoods from '@/views/search/components/searchGoods/index.vue'
import router from '@/router'

const value = ref('')
const isShow = ref(true)
const showGoods = ref(true)
// 输入框内容变化时触发
const onSearch = debounce((val: any) => {
  if (value.value) {
    isShow.value = false
    useSearchStore.getSearchTime_search(val)
  } else {
    isShow.value = true
  }
}, 1000)
const onshow = (val: string) => {
  //判断输入的值在本地定义的数组中z是否存在
  let isReapet = history.value.some((item) => item === val)
  // console.log(isReapet)
  if (!isReapet) {
    // history.value.push(val)
    history.value.unshift(val)
  }
  localStorage.setItem('history_search', JSON.stringify(history.value))
}
//点击取消时
const onCancel = () => {
  showAction.value = false
  showGoods.value = true
  showAction.value = true
  if(history.value.length !== 0){
    router.push('/search')
  }else{
    router.go(-1)
  }
  
}

const useSearchStore = searchStore()
const { hotKeywordList, defaultKeyword, hotTimeData } = storeToRefs(useSearchStore)
onMounted(() => {
  useSearchStore.getHotSearchdata_search()
  getHistoryInfo()
})

const history = ref<string[]>([])
//定义设置本地存储空间的函数
const getHistoryInfo = () => {
  const newHistory = localStorage.getItem('history_search')
  // console.log(newHistory);
  if (newHistory !== null) {
    history.value = JSON.parse(newHistory as string)
  }
}
//删除历史记录
const removeHistory = () => {
  history.value = []
  localStorage.setItem('history_search', JSON.stringify(history.value))
}

//点击热门搜索，让其显示在输入框中并且跳转到商品信息列表

const showAction = ref(true)
const toSearchInfo = (searchInfoItem: string) => {
  //显示搜索完后的列表
  showGoods.value = false
  //将热门搜索里的tag显示到搜索框上
  value.value = searchInfoItem
  showAction.value = false
  useSearchStore.getSearchMainInfo(searchInfoItem)
  getHistoryInfo()
}
const showCancel = () => {
  //获取焦点把取消隐藏
  showAction.value = true
  showGoods.value = true
}

const toSeaarchGoodslist = (timeItem: string) => {
  useSearchStore.getSearchMainInfo(timeItem)
  showGoods.value = false
  isShow.value = true
  value.value = timeItem
}
</script>

<style lang="less" scoped>
.searchContainer {
  width: 100%;
  height: 100vh;
  background-color: #eeeeee;
  .searchHeader {

    .searchHot {
      background-color: white;
      padding: 20px 0px;
      margin-bottom: 8px;
      .searchHis {
        display: flex;
        justify-content: space-between;
        padding-right: 15px;
      }
      .searchHotText {
        font-weight: 400;
        font-size: 14px;
        padding-left: 15px;
        color: #999;
      }
      .searchHotTag {
        padding: 0px 15px;
        .searchHotTagItem {
          padding-right: 15px;
        }
      }
    }
    .searchTwo {
      background-color: white;
      padding-left: 15px;
      .searchTwoItem {
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid gray;
        .searchTwoItemText {
          font-size: 15px;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
